<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.4">
	<title>忘记密码_社优保</title>
	<link rel="stylesheet" href="__ROOT__/static/plugs/layui/css/layui.css?at={:date('md')}">
	<link rel="stylesheet" href="__ROOT__/static/index/css/admin.css?at={:date('md')}">
	<link rel="stylesheet" href="__ROOT__/static/index/css/animate.min.css">
	<link rel="stylesheet" href="__ROOT__/static/index/css/layui-admin.css">
	<link rel="stylesheet" href="__ROOT__/static/index/css/login.css">


	<!-- <link rel="stylesheet" href="__ROOT__/static/index/css/console.css?at={:date('md')}"> -->
	<link rel="stylesheet" href="__ROOT__/static/index/css/icon/iconfont.css?at={:date('md')}">
</head>
	<body>
	<div class="main" data-tab="one">
		<div class="main_con">


					<p class="forget-title">忘记密码</p>
					<div class="forgetpw-step">
						<div class="on"  data-tab="one" >
							<div class="step-number">1</div>
							<p>填写公司名称</p>
						</div>


						<div  data-tab="two" >
							<div class="step-number">2</div>
							<p>验证手机号码</p>
						</div>
<!--						<span class="step-line"></span>-->

						<div  data-tab="three" >
							<div class="step-number">3</div>
							<p>重置密码</p>
						</div>
					</div>
					<div class="sign-form ">
						<form onsubmit="return false" method="post" data-auto="true" class="form-one" data-callback="forgetOne"
							  data-csrf="{:systoken('forgetpw')}" action="{:url('forgetpw')}" >
<!--							<form onsubmit="return false" class="form-one"  onclick="forgetOne()">-->

							<ul>
								<li>
									<input class="layui-input" required pattern="^\S{4,}$" name="name"  autocomplete="off" placeholder="请输入公司名称">

									<i class="iconfont icongongsi"></i>
								</li>

									<button type="submit" class="btn btn-145  full-width" data-form-loaded="下一步">下一步</button>
							</ul>
						</form>
						<form onsubmit="return false" method="post" data-auto="true" class="form-two" data-callback="forgetTwo"
							  data-csrf="{:systoken('index/login/forgetpw_check')}"
							  action="{:url('index/login/forgetpw_check')}">
							<ul>
								<li class="mobile">

										<input type="text" disabled class="layui-input mobile"  value="">
										<i class="iconfont iconshouji"></i>

								</li>
								<li class="verify">

										<i class="iconfont iconyanzhengma1"></i>
										<input type="text" name="verify" required placeholder="请输入验证码" pattern="^\d{4}$"
											   error-msg="请输入正确的验证码"
											   autocomplete="off" class="layui-input">
										<a class="get-code-btn">获取验证码</a>

								</li>
<!--								<li class="text-center  padding-bottom-0">-->
									<button type="submit" class="btn  full-width" data-form-loaded="下一步">下一步</button>
<!--								</li>-->
							</ul>
							<input type="hidden" name="mobile" id="phone">
							<input type="hidden" name="type" value="3">
						</form>
						<form onsubmit="return false" method="post" data-auto="true" class="form-three"
							  data-csrf="{:systoken('index/login/forgetpw_modify')}"
							  action="{:url('index/login/forgetpw_modify')}">
							<ul>
								<li class="password">

										<i class="iconfont iconmima1"></i>
										<input type="password" name="password" required
											   pattern="^([a-zA-Z0-9]|[._\\~!@#$%^&*()-_=+|{}\[\],.?\/:;\']){6,18}$"
											   placeholder="请输入6-18位密码的新密码" autocomplete="off" class="layui-input"
											   error-msg="6-18位字母、数字或符号">

								</li>
								<li class="repassword">

										<i class="iconfont iconmima1"></i>
										<input type="password" name="repassword"
											   placeholder="确认密码" rule="pdequally" autocomplete="off" class="layui-input"
											   error-msg="两次密码不一致">

								</li>
									<input type="hidden" name="mobile">
									<button type="submit" class="btn  full-width" data-form-loaded="确认修改">确认修改</button>

							</ul>
						</form>

					</div>


			<div style="text-align: center;margin-top: 100px">
				<a  class="explain_info" > <a class="forget-pw" href="{:url('index/login/index')}">已有账号，立即登录</a>
				</a>
			</div>


		</div>

	</div>
	<script src="__ROOT__/static/plugs/layui/layui.all.js"></script>
	<script src="__ROOT__/static/plugs/require/require.js"></script>
	<script src="__ROOT__/static/index/admin.js"></script>
	<script>
		function forgetOne(res) {

			if (res.code == 1) {
				$("input[name='mobile']").val(res.data.mobile);
				var reg = /^(\d{3})\d{4}(\d{4})$/;
				var mobile = res.data.mobile.replace(reg, "$1****$2");
				$(".mobile").val(mobile);
				$(".main").attr("data-tab", "two");
				$(".on").removeClass("on")
				$(".forgetpw-step div[data-tab='two']").addClass("on");
			} else {
				$.msg.error(res.info)
			}
			return false
		}
		function forgetTwo(res) {
			if (res.code == 1) {
				$(".main").attr("data-tab", "three");
				$(".on").removeClass("on")
				$(".forgetpw-step div[data-tab='three']").addClass("on");
			} else {
				$.msg.error(res.info)
			}
			return false
		}
		function pdequally(val) {

			if ($("input[name='password']").val() != $("input[name='repassword']").val() || !$("input[name='password']").val() || !$("input[name='repassword']").val()) {
				return "两次密码不一致";
			}
		}
		//获取验证码
		timer="";
		nums = 60;
		phoneFlag = true;
		$(".get-code-btn").on("click",function(){
			if(phoneFlag){
				var that = this
				//检测手机号码
				var isCheck = checkPhone("phone")
				if(!isCheck){
					return false
				}

				phoneFlag=false;


				$.ajax({
					url: '{:url("send_sms")}',
					data: {
						"mobile":$("input[name='mobile']").val(),
						"type":1,
						"verify_type":3
					},
					type: "post",
					success: function(res) {
						if(res.code == 1) {
							layer.msg("验证码发送成功，请等待~")
							// $.msg.alert("验证码发送成功，请等待~")

							// 验证码倒计时
							var code=$(that);
							timer=setInterval(function(){
								if(nums>0){
									nums--;
									code.html(nums+" 秒");
									// code.addClass("gray-bg");
								}
								else{
									clearInterval(timer);
									nums=60;//重置回去
									phoneFlag = true
									code.html("获取验证码");
								}
							},1000)

						} else {
							phoneFlag = true
							layer.msg(res.info)
						}
					},
					error: function() {
						layer.msg("发送失败");
					}
				});


			}

		});
	</script>
	<style>
		body{

			background-image: url('__ROOT__/static/index/img/login-bg.png');

		}
		.main_con{
			background: #FFFFFF;
		}
		.forget-title{
			font-size: 18px;
			font-weight: bold;
			color: #2C2C2C;
			line-height: 32px;
			padding-top: 40px;
			margin-left: 40px;
		}
		.forgetpw-step{
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding-top: 50px;
		}
		.forgetpw-step p{
			color:#9C9CAE;
		}
		.forgetpw-step>div{
			width: 300px;
			display: flex;
			align-items: center;
			justify-content: center;
			/*flex-direction: column;*/
			padding-bottom: 15px;
			border-bottom: 1px solid #E5E5ED;

		}
		.forgetpw-step .step-number{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			/*background: #00a0e9;*/
			background: #CDCDD6;
			/*margin-bottom: 20px;*/
			text-align: center;
			vertical-align: middle;
			color: #FFFFFF;
			margin-right: 6px;

		}

		.forgetpw-step .on .step-number{
			background: #61cad7;
		}
		.forgetpw-step .on p{
			color: #2C2C2C;
		}
		.forgetpw-step .on {
			border-bottom: 1px solid #61CAD7;
		}
		.sign-form{
			display: flex;
			align-items: flex-start;
			justify-content: center;
			margin-top: 33px;
		}
		.sign-form form{
			position: relative;
			display: none;
			width: 325px;
			top: 0;
		}
			/*input*/

		.sign-form form .verify{
			padding-top: 20px !important;
		}
		.sign-form form .verify .iconfont{
			top: 26px;
		}
		.sign-form form input{
			background: #ffffff !important;
			border: 1px solid #C9C5C5 !important;
			padding: 5px !important;
			padding-left: 32px !important;
			border-radius: 10px;

			color: #0D0D0D;
		}
		.sign-form form input[disabled]{
			background: #E5E5ED !important;
			border: 1px solid #E5E5ED;
			border-radius: 10px;
			color: #8F8FA8;
		}
		.sign-form form .layui-input {
			line-height: 38px;
			height: 38px;
		}
		/*placeholder*/
		.sign-form input:-moz-placeholder {
			color: #CDCDD6;
			opacity: 1;
		}

		.sign-form input::-moz-placeholder {
			color: #CDCDD6;
			opacity: 1;
		}

		.sign-form input:-ms-input-placeholder {
			color: #CDCDD6;
		}

		.sign-form input::-webkit-input-placeholder {
			color: #CDCDD6;

		}
		/*iconfont*/
		.sign-form form ul li i.iconfont {
			color: #CDCDD6;
			padding-left: 13px;
			padding-top: 4px;

		}
		.main[data-tab='one'] .form-one {

			display: block;

		}

		.main[data-tab='two'] .form-two {

			display: block;

		}
		.main[data-tab='three'] .form-three {

			display: block;

		}
		.form-one button::after{

			 content: "下一步" !important;

		}
		.form-two button::after{

			content: "下一步" !important;

		}
		.form-three button::after{

			content: "确认修改" !important;

		}
		.sign-form form button{
			border: none;
			background:#61cad7 !important; ;
			color: #ffffff !important;
			margin-top: 50px;
		}
		/*	form-two*/
		.sign-form .get-code-btn {
			position: absolute;
			display: inline-block;
			color: #61CAD7;
			right: 0;
			top: 24px;
			padding-top: 0;
			padding-right: 10px;
			line-height: 32px;


		}

		.sign-form form span{

			top: 70px !important;
			left: 32px !important;
		}
		.sign-form .verify span{
			top: 50px !important;
			left: 32px !important;
		}

	</style>
	</body>
</html>
